<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<style>
</style>
<body>
<!-- 容器 -->
<div id="root">
<h1>{{timeStr}}</h1>
    <h1>{{getTime()}}</h1>
    <h1>{{time | formatTime('YYYY_MM_DD')}}</h1>
    <h1>{{time | formatTime('YYYY_MM_DD')|mySlice}}</h1>
    <h1>{{msg | mySlice}}</h1>
    <input type="text" v-model="msg">
</div>
<script type="text/javascript">
    Vue.config.productionTip=false
    Vue.filter("mySlice",function (value){
        return value.slice(0,4)
    })
    const vm=new Vue({
        el: '#root',
        data:{
            time:1720082146170,
            msg:'hello',
        },
        computed:{
            timeStr(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        methods:{
            getTime(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        filters:{
            formatTime(value,a){
                return dayjs(value).format(a)
            },

        }
    })
</script>
</body>
</html>